import React from 'react'
import './css/footer.less';
class Pager extends React.Component {
  state = {
     totalPage: 0,
     selectedPage: 0, // 选中页
  	 pageList: []
  }
  getPager = (index, totalPage) => {
  	const pageList = []
    for(let i = 1; i <= totalPage; i++) {
    	pageList.push(i)
    }
    this.setState({pageList, totalPage})
  }
  componentWillReceiveProps () {
    const pagers = this.props.pagers
    const totalPage = pagers.total%pagers.count?(Math.floor(pagers.total/pagers.count)+1):Math.floor(pagers.total/pagers.count)
    this.getPager(pagers.index, totalPage)
  }
  changePage = (event, page) => {
    event.preventDefault();
    this.setState({
      selectedPage: page
    })
    this.props.changePage(page)
  }
  render () {
    return (
      <div>
        {this.state.totalPage > 1?
        <nav aria-label="Page navigation">
		  <ul className="pagination">
		    <li>
		      <a href="javascript;" className="active" onClick={(event)=>{this.changePage(event, this.props.pagers.index>0?this.props.pagers.index-1:0)}}>
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    {this.state.pageList.map((item, index)=>(
		    <li key={index} className={index===this.state.selectedPage?'active':''}><a href="javascript;" onClick={(event)=>{this.changePage(event, item-1)}}>{item}</a></li>
		    ))}
		    <li>
		      <a href="javascript;" onClick={(event)=>this.changePage(event, this.state.totalPage>(this.props.pagers.index+1)?this.props.pagers.index+1:(this.state.totalPage-1))} aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
		:
		''}
      </div>
    )
  }
}
export default Pager